<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/chr/echarts.min.js"></script>
    <script type="text/javascript" src="/layui/jquery-2.2.1.js"></script>
    <title>成绩分析图</title>
</head>
<body>
    <div id="chart-panel" style="height: 450px;width: 800px"></div>
    <script type="text/javascript">
        var dom = document.getElementById("chart-panel");
        var myChart = echarts.init(dom);
        var option;
        var app ={};

        const labelOption = {
          show: true,
          position: "insideBottom",
          distance:19,
          align: 'left',
          verticalAlign: 'middle',
          rotate: 90,
          formatter: '{c}  {name|{a}}',
          fontSize: 16,
          rich: {
            name: {}
          }
        };
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['李林', '俞震威', '夏天']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: ['基础会计', '财经法规', '成本风险与控制', '内部风险规划与控制', '财务会计与报表透视']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '李林',
              type: 'bar',
              barGap: 0,
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [98, 99, 98]
            },
            {
              name: '俞震威',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [88, 74, 70]
            },
            {
              name: '夏天',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [68, 70, 65]
            },
          ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>
</html>
    